<template>
  <header>
    <i class="iconfont icon-zuojiantou" @click="handleBack"></i>
    <span v-scroll="scrolltoShow"><slot></slot></span>
  </header>
</template>

<script>
// 引入vue
import Vue from 'vue'
// 引入图库
import '@/assets/font_3180509_lh96vsafsw/iconfont.css'
Vue.directive('scroll', {
  inserted (el, binding) {
    el.style.display = 'none'
    window.onscroll = () => {
      if (document.documentElement.scrollTop > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})
export default {
  props: {
    scrolltoShow: {
      default: 50,
      type: Number
    }
  },
  methods: {
    handleBack () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='scss'>
span {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 44px;
  background: #fff;
  z-index: 2;
  text-align: center;
  line-height: 44px;
  font-size: 17px;
}
.iconfont {
  position: fixed;
  top: 7px;
  left: 5px;
  z-index: 3;
  width: 30px;
  height: 30px;
  font-size: 16px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  text-align: center;
}
</style>
